<template>
	<view class="container">
		<view class="story">
			<view class="time">
				{{$u.timeFormat(info.createtime, 'yyyy-mm-dd hh:MM:ss')}}
			</view>
			<view class="content" v-html="info.content"></view>
			<view style="text-align: right;width: 100%;padding: 0 62rpx;font-size: 28rpx;">{{info.phone}}</view>
			<uni-card class="ucard" padding="0" spacing="0">
				<view slot="actions" class="card-actions no-border">
					<view class="card-actions-item" @click="actionsZan(info.zan)">
						<uni-icons type="hand-up" size="32" :color="info.zan==1?'red':'#ccc'"></uni-icons>
						<text class="card-actions-item-text">点赞{{info.zan_num}}</text>
					</view>
					<view class="card-actions-item" @click="actionsCang(info.cang)">
						<uni-icons type="star" size="32" :color="info.cang==1?'red':'#ccc'"></uni-icons>
						<text class=" card-actions-item-text">收藏{{info.cang_num}}</text>
					</view>
				</view>
			</uni-card>
			<view class="pinglist">
				<view class="pltitle">
					<h3>评论列表({{list.length}})</h3>
				</view>
				<view class="pinglunlist">
					<view class="items" v-for="item in list">
						<view class="userpl">
							<view class="item-adminid user">
								<view class="userinfo" >
									<uni-icons type="star" size="30" color="#999"></uni-icons>{{item.phone}}
								</view>
								<view class="time">
									{{$u.timeFrom(item.createtime*1000, 'yyyy年mm月dd日 hh时MM分')}}
								</view>
							</view>
							<view class="item-adminid comment">{{item.content}}</view>

						</view>
					</view>
				</view>
			</view>
			<!-- </uni-section> -->
		</view>
		<view class="bottom">
			<view class="inner" @tap="show=true">
				发表评论...
			</view>
			<view style="display: flex;align-items: center;">
				<uni-icons type="chatbubble" :size="28" color="#999"></uni-icons>
				<text style="font-size: 20px;margin-left: 8rpx;color:#999">{{list.length}}</text>
			</view>
		</view>
		<u-popup :show="show" @close="close" mode="bottom">
			<view class="model flex">
				<u--textarea class="textarea" v-model="inputContet" placeholder="说点什么..." autoHeight
					border="none"></u--textarea>
				<u-button color="#6fc73f" text="发布" @tap="submit"></u-button>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		answerDetailAPI,
		storyDetailAPI,
		storyPinglunListAPI,
		storyZanCangAPI,
		notstoryZanCangAPI,
		addComment,
		//deletestoryAPI
	} from "@/api/api.js"
	export default {
		data() {
			return {
				info: {},
				type: "",
				id: "",
				PinglunList: "",
				list: [],
				show: false,
				inputContet: "",
				page: 1
			}
		},
		onLoad(opt) {
			this.type = opt.type
			this.id = opt.id
			this.goshi_id = opt.id
			this.getInfo()
			this.toPingList()
		},
		onReachBottom() {
			this.page++
			this.toPingList()
		},
		methods: {
			getInfo() {
				storyDetailAPI({
					id: this.id
				}).then(res => {
					this.info = res.data.data
				})
			},
			toPingList() {
				storyPinglunListAPI({
					gushi_id: this.goshi_id,
					page: this.page
				}).then(res => {
					if ((res.data.data.rows).length == 0) {
						this.page--
						return
					}
					this.list = [...this.list, ...res.data.data.rows]
				})
			},
			
			/* shanchu(item){
				const params={
					id:item.id
				}
				deletestoryAPI(params).then(res=>{
					console.log("删除成功")
				})
			}, */
			
			async actionsZan(key) {
				if (key == 0) {
					storyZanCangAPI({
						gushi_id: this.goshi_id,
						type: '1',
						kind: '0'
					}).then(res => {
						this.getInfo()
						uni.$u.toast("点赞成功")
					})
				} else {
					notstoryZanCangAPI({
						gushi_id: this.goshi_id,
						type: '1',
						kind: '1'
					}).then(res => {
						this.getInfo()
						uni.$u.toast("取消点赞")
					})
				}
			},
			async actionsCang(key) {
				if (key == 0) {
					storyZanCangAPI({
						gushi_id: this.goshi_id,
						type: 2,
						kind: 0
					}).then(res => {
						this.getInfo()
						uni.$u.toast("收藏成功")
					})
				} else {
					notstoryZanCangAPI({
						gushi_id: this.goshi_id,
						type: 2,
						kind: 1
					}).then(res => {
						this.getInfo()
						uni.$u.toast("取消收藏")
					})
				}
			},
			back() {
				uni.navigateBack()
			},
			close() {
				this.show = false
				this.inputContet = ""
			},
			submit() {
				addComment({
					gushi_id: this.id,
					content: this.inputContet
				}).then(res => {
					uni.$u.toast(res.data.msg)
					this.page = 1
					this.list = []
					this.toPingList()
					this.close()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.title {
		text-align: center;
		font-size: 36rpx;
		font-weight: 600;
	}

	.u-popup {
		flex: 0;
	}

	/deep/.u-popup__content {
		background-color: transparent;
	}

	.model {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		border-radius: 6px 6px 0px 0px;
		background: #fff;
		padding: 20rpx 20rpx 40rpx;
		min-height: 29.27vw;
		width: 100%;

		.textarea {
			width: 100%;
		}

		.u-button {
			color: #000;
			width: 20vw;
			height: 8vw;
			border-radius: 4vw;
			margin-left: auto;
			margin-right: 0;
			background: #eee5d6;
		}
	}

	.container {
		width: 100%;
		min-height: 100vh;
		padding-bottom: 90rpx;
	}

	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 90rpx;
		box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, 0.1);
		background: #eee;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;

		.inner {
			width: 70%;
			background-color: #fff;
			height: 60rpx;
			border-radius: 12rpx;
			line-height: 60rpx;
			padding-left: 20rpx;
			color: gainsboro;
		}
	}

	.story {
		box-sizing: border-box;
		border-radius: 10rpx;
		box-sizing: border-box;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;

		.time {
			margin-bottom: 10rpx;
			font-size: 24rpx;
			color: #6a6a6a;
		}

		.img {
			border-radius: 12rpx;
		}

		.content {
			width: 100%;
			font-size: 30rpx;
			color: #3a3a3a;
			padding: 30rpx 60rpx;
			text-indent: 2rem;
			line-height: 1.5;
		}

		.ucard {
			width: 100%;
			margin-top: 30rpx;
			display: flex;
			flex-direction: column;
			margin-bottom: 30rpx;

			.card-actions {
				width: 100%;
				height: 90%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				font-size: 28rpx;

				.card-actions-item {
					display: flex;
					align-items: center;
					font-size: 24rpx;
				}
			}
		}

		.pinglist {
			width: 100%;
			margin: 0 center;
			box-sizing: border-box;
			background-color: #fff;

			text-align: left;
			background: url("@/static/image/bg.png") center / 100%;
			border-top: 10rpx solid gainsboro;

			.pltitle {
				margin: 20rpx 0;
				padding: 0 40rpx;
			}


			.pinglunlist {
				width: 100%;

				.items {
					width: 100%;
					display: flex;
					flex-direction: row;
					line-height: 50rpx;
					margin: 10rpx 0;
					padding: 10rpx 40rpx;
					border-bottom: 2rpx solid gainsboro;

					.userpl {
						width: 100%;
					}

					.user {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.userinfo {
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

					.comment {
						font-size: 24rpx;
						line-height: 36rpx;
						text-indent: 20rpx;
						word-break: break-all;
					}
				}

			}

		}
	}
</style>